
import React, { useState, useEffect} from 'react';

import { Tabs, Card } from 'antd';
import styles from './index.less';
import { useInViewport } from '@umijs/hooks';
import  Totalcompensation from './components/Totalcompensation'
import Compensationlist from './components/Compensationlist'
import PayDetail from './components/payDetail'
import CostAnaysis from './components/costAnaysis'
import AuthComponent from '@/components/Authorized/AuthComponent';

const { TabPane } = Tabs;
export default () => {

  const [activeKey,setActiveKey] = useState('1');
  // 保存已经加载的tab-key，用于业务页面的缓存。
  const [loadedkey,setLoadedkey] = useState('1');
  // 用于重置缓存页面的tab选中状态
  const inViewPort = useInViewport(() => document.querySelector('#pageViewId'));

  useEffect(()=>{
    if (AuthComponent.getAuth('luggageCharts.totalCompensation.list')) {
      setActiveKey('1')
    } else if (AuthComponent.getAuth('luggageCharts.compensationlist.list') ) {
      setActiveKey('2')
    } else if (AuthComponent.getAuth('luggageCharts.cost.list') ) {
      setActiveKey('3')
    } else if (AuthComponent.getAuth('luggageCharts.payDetail.list') ) {
      setActiveKey('4')
    }
  },[]);

  return (
    <Card id="pageViewId" className={styles.charts}>
      <Tabs defaultActiveKey="1" onChange={(key)=>{
        setActiveKey(key);
        setLoadedkey(loadedkey+key);
      }}>
        {
          AuthComponent.getAuth('luggageCharts.totalCompensation.list')
          ? <TabPane tab="补偿合计表" key="1">
            {/* {activeKey === '1' ? <Totalcompensation></Totalcompensation> : null} */}
            {loadedkey.indexOf('1') > -1 ? <Totalcompensation /> : null}
          </TabPane>
          : null
        }
        {
          AuthComponent.getAuth('luggageCharts.compensationlist.list')
          ? <TabPane tab="补偿明细表" key="2">
            {/* {activeKey === '2' ? <Compensationlist></Compensationlist> : null} */}
            {loadedkey.indexOf('2') > -1 ? <Compensationlist /> : null}
          </TabPane>
          : null
        }
        {
          AuthComponent.getAuth('luggageCharts.cost.list')
          ? <TabPane tab="成本分析表" key="3">
            {/* {activeKey === '3' ? <CostAnaysis></CostAnaysis> : null} */}
            {loadedkey.indexOf('3') > -1 ? <CostAnaysis /> : null}
            </TabPane>
          : null
        }
        {
          AuthComponent.getAuth('luggageCharts.payDetail.list')
          ? <TabPane tab='支付明细表' key="4">
            {/* {activeKey === '4' ? <PayDetail></PayDetail> : null} */}
            {loadedkey.indexOf('4') > -1 ? <PayDetail /> : null}
          </TabPane>
          : null
        }
      </Tabs>
    </Card>
  );
};
